<template>
	<view class="current_detail_box">
		<view class="current_detail_top_bg">
			<text class="interest_rate_value">3.10</text>
			<view class="day_annualized_rate">七日年化收益率(%)</view>
			<view class="thousands_of_income_box">
				<view class="left_thousands_of_income">
					<text class="big_text">0.6948</text>
					<text class="small_text">万份收益(03-07)</text>
				</view>
				<view class="left_thousands_of_income">
					<text class="big_text">100.0000</text>
					<text class="small_text">起购价格</text>
				</view>
			</view>
		</view>
		<view class="current_detail_middle_box">
			<view class="first_title_view">
				<text class="title_big_text">七日年化收益曲线</text>
				<i class="cuIcon-right"></i>
			</view>
			<view class="tubiao_box">
				<view class="charts-box">
					<qiun-data-charts type="gold" :chartData="chartData" background="none" :ontap="false"
						:uchartsH5="true" :uchartsApp="true" :onmouse="false" />
				</view>
				<view class="tab_text_box">
					<text class="model_tab_text active_text">近一月</text>
					<text class="model_tab_text">近三个月</text>
					<text class="model_tab_text">近半年</text>
					<text class="model_tab_text">近一年</text>
				</view>
			</view>

			<view class="tab_Information">
				<text @tap="changeTab(1)" class="tb_Information_txt" :class="{active_show:currentTab==1}">基金档案</text>
				<text @tap="changeTab(2)" class="tb_Information_txt" :class="{active_show:currentTab==2}">交易规则</text>
				<text @tap="changeTab(3)" class="tb_Information_txt" :class="{active_show:currentTab==3}">常见问题</text>
			</view>

			<view v-if="currentTab==1" class="Basic_Information_box">
				<view class="base_text_box">
					<view class="model_base_text">
						<text class="qian_text" style="font-size: 30upx;">基本信息</text>
					</view>
					<view class="model_base_text">
						<text class="qian_text">基金全程</text>
						<text class="bold_text">国金众赢货币市场证券投资基金</text>
					</view>
					<view class="model_base_text">
						<text class="qian_text">基金代码</text>
						<text class="bold_text">001234</text>
					</view>
					<view class="model_base_text">
						<text class="qian_text">基金类型</text>
						<text class="bold_text">货币型(低风险)</text>
					</view>
					<view class="model_base_text">
						<text class="qian_text">基金状态</text>
						<text class="bold_text">开放交易</text>
					</view>
					<view class="model_base_text">
						<text class="qian_text">成立日期</text>
						<text class="bold_text">2015-06025</text>
					</view>
					<view class="model_base_text">
						<text class="qian_text">基金公司</text>
						<text class="bold_text">国金基金管理有限公司</text>
					</view>
					<view class="model_base_text">
						<text class="qian_text">总规模</text>
						<text class="bold_text">821,788,01万份</text>
					</view>
					<view class="model_base_text">
						<text class="qian_text">总资产</text>
						<text class="bold_text">82.21亿元</text>
					</view>
				</view>

			</view>

			<view v-if="currentTab==2" class="Trading_Rules_box">
				<view class="pay_rules">
					<view class="title">购买规则</view>
					<image class="dian_5" src="../../static/current/dian4.png" mode=""></image>
					<view class="rules_text">
						<view class="rules_model">
							<text class="hong">T日15点前</text>
							<text>购买</text>
						</view>
						<view class="rules_model">
							<text class="hong">T+1日17点后</text>
							<text>确认份额</text>
						</view>
						<view class="rules_model">
							<text class="hong">T+2日</text>
							<text>查看收益</text>
						</view>
						<view class="rules_model">
							<text class="hong">T+2日起</text>
							<text>可赎回</text>
						</view>
					</view>
					<view class="desc_text">
						*T日为交易日。周末和法定节假日不属于T日看在节假日或15点后购买，将于下一个T日生效。确认份额等时间点都将顺延一个T日
					</view>
					<view class="service_charge">
						购买手续费
						<view class="service_money">0.00
							<view>元</view>
						</view>
					</view>
				</view>

				<view class="pay_rules">
					<view class="title">赎回规则</view>
					<image class="dian_5" src="../../static/current/dian3.png"></image>
					<view class="rules_text">
						<view class="rules_model">
							<text class="hong">T日15点前</text>
							<text>赎回</text>
						</view>
						<view class="rules_model">
							<text class="hong">T+1日17点后</text>
							<text>确认份额及到账金额</text>
						</view>
						<view class="rules_model">
							<text class="hong">T+2日</text>
							<text>24点前到账</text>
						</view>
					</view>
					<view class="desc_text">
						*T日为交易日。周末和法定节假日不属于T日看在节假日或15点后购买，将于下一个T日生效。确认份额等时间点都将顺延一个T日
					</view>
					<view class="service_charge">
						赎回手续费
						<view class="service_money">0.00
							<view>元</view>
						</view>
					</view>
				</view>

				<view class="pay_rules">
					<view class="title">收益说明</view>
					<view class="explain">
						<view>
							*货币基金收益每日发放，但每日到账收益不同。今日到账收益=昨日已确认份额当日万份收益/10000。
						</view>
						<view>
							*购买确认当日起计算收益,赎回确认当日起不再计算收益。
						</view>
						<view>
							*鉴于每日到账收益不到0.01元时，系统可能不会更新收益,建议持有100元及以上。
						</view>
					</view>
				</view>
			</view>

			<view v-if="currentTab==3" class="common_problem_box">
				<view class="btn_box">
					<view class="btn">什么是基金?</view>
				</view>
				<view class="text">
					基金(全称证券投资基金)是一款以组合方式进行投资的集合投资产品。投资人通过购买基金份额的方式，将众多资金集中起来，交由具备专业资质的基金管理人进行资产管理，并依据其持有份额共享利益、共担风险
				</view>
			</view>

			<view class="detail_footer_text">
				<view class="first_txt">基金销售服务由成都宇宁基金销售有限公司提供</view>
				<view class="txt">投资前靖详纽阅读基金合同，招募说明韦。基金的过往业绩不预示其未来表现,巿场有凤险。投资需逆慎</view>
			</view>

		</view>
		<view class="detail_footer_box">
			<view class="go_pay_btn" @tap="buy">立即购买</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 1,
				chartData: {
					"categories": [
						"01-28",
						"02-08",
						"02-18",
						"02-28",
						"03-08",
						"03-18"
					],
					"series": [{
							"name": "成交量A",
							"data": [
								359.15,
								375.23,
								372.11,
								390.10,
								365.63,
								378.60,
								380.56
							]
						}

					]
				},
				chartDataRing: {
					"series": [{
						"data": [{
								"name": "债券",
								"value": 77.62
							},
							{
								"name": "现金",
								"value": 1.79
							},
							{
								"name": "股票",
								"value": 17.88
							}

						]
					}]
				},
				tooltipCustom: {
					x: 10,
					y: 10,
					index: 2,
					textList: [{
						text: "自定义文字",
						color: "#EE6666"
					}]
				}
			}
		},
		onLoad(options) { 
			uni.setNavigationBarTitle({
				title:options.data
			})
		},
		methods: {
			changeTab(num) {
				this.currentTab = num;
			},
			buy(){
				uni.navigateTo({
					url:'../fund_buy/fund_buy'
				})
			}
		}
	}
</script>

<style lang="scss">
	.current_detail_box {
		width: 750upx;
		background-repeat: no-repeat;
		background-size: 100%;
		background-image: url('../../static/current/bg.png');
		background-color: #F8F8F8;
		overflow: scroll;
		padding-bottom: 100upx;

		.current_detail_top_bg {
			height: 330upx;
			font-size: 0upx;
			box-sizing: border-box;
			padding-top: 50upx;
			text-align: center;

			.interest_rate_value {
				color: white;
				font-size: 60upx;
				font-weight: bold;
				line-height: 40upx;
			}

			.day_annualized_rate {
				color: #ffffff;
				font-size: 24upx;
				margin-top: 30upx;
			}

			.thousands_of_income_box {
				display: flex;
				justify-content: space-around;
				margin-top: 40upx;

				.left_thousands_of_income {
					display: flex;
					flex-direction: column;

					.big_text {
						font-size: 40upx;
						font-weight: bold;
						color: white;
					}

					.small_text {
						font-size: 24upx;
						color: #ffffff;
					}
				}
			}
		}

		.current_detail_middle_box {
			border-radius: 40upx;
			background-color: #F8F8F8;
			padding-top: 45upx;
			padding-left: 25upx;
			padding-right: 25upx;
			box-sizing: border-box;

			.first_title_view {
				height: 25upx;
				box-sizing: border-box;
				border-left: 7upx solid $uni-global-color-theme;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 32upx;
				font-weight: 550;
				padding-left: 13upx;

				.next_image {
					width: 40upx;
					height: 40upx;
				}
			}

			.tubiao_box {
				margin-top: 35upx;
				height: 550upx;
				background-color: white;
				border-radius: 10upx;

				.charts-box {
					height: 430upx;
				}

				.tab_text_box {
					width: 620upx;
					height: 50upx;
					margin-top: 40upx;
					border: 1px solid #f3f3f3;
					border-right: none;
					margin: 40upx auto;
					display: flex;

					.model_tab_text {
						width: 155upx;
						height: 50upx;
						line-height: 50upx;
						text-align: center;
						color: #aeaeae;
						font-size: 30upx;
						border-right: 1upx solid #f3f3f3;
					}

					.active_text {
						color: white;
						background-color: $uni-global-color-theme;
					}
				}

			}

			.tui-box {
				padding-top: 30upx;

				.tui-cell-header {
					height: 40upx;
					padding: 0 10upx;
					box-sizing: border-box;
					border-left: 5px solid #3476f1;

					.tui-cell-title {
						font-size: 32upx;
						line-height: 40upx;
						font-weight: 550;
						color: #333333;
					}

					.tui-cell-sub {
						font-size: 26upx;
						font-weight: 400;
						color: #999;
						padding-right: 28upx;
					}
				}

				.tui-order-list {
					margin: 30upx auto;
					box-sizing: border-box;
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					justify-content: space-around;
					background-color: white;
					border-radius: 20rpx;

					.tui-tool-item {
						width: 25vw;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						padding: 30upx 0 30upx 0;

						.tui-icon-box {
							.tui-tool-icon {
								width: 94upx;
								height: 94upx;
								display: block;
							}

							.tui-badge-icon {
								width: 66upx;
								height: 30upx;
								position: absolute;
								right: 0;
								transform: translateX(88%);
								top: -15upx;
							}

						}

						.tui-tool-text {
							font-size: 24upx;
							font-weight: 400;
							color: #666666;
							padding-top: 30upx;
						}
					}

					.tui-mess-text {
						padding: 20upx 40upx 20upx 40upx;
						border-top: 1upx solid #fbfbfb;
						line-height: 40upx;
						font-size: 24upx;
						color: #999999;
					}
				}
			}

			.tab_Information {
				margin-top: 30upx;
				height: 60upx;
				font-size: 30upx;
				color: #aeaeae;

				.tb_Information_txt {
					margin-right: 60upx;
				}

				.active_show {
					font-size: 35upx;
					font-weight: bold;
					color: $uni-global-color-theme;
					position: relative;

					&::after {
						content: "";
						display: inline-block;
						position: absolute;
						border-radius: 5upx;
						width: 50upx;
						height: 10upx;
						background-color: $uni-global-color-theme;
						bottom: -25upx;
						left: 50%;
						margin-left: -25upx;
					}
				}
			}

			.Basic_Information_box {
				margin-top: 30upx;

				.base_text_box {
					border-radius: 20upx;
					background-color: white;
					box-sizing: border-box;
					padding-left: 34upx;
					padding-right: 34upx;
					margin-bottom: 40upx;

					.model_base_text:last-child {
						border-bottom: none;
					}

					.model_base_text {
						line-height: 80upx;
						border-bottom: 1upx solid #f7f7f7;
						box-sizing: border-box;
						position: relative;
						display: flex;

						.qian_text {
							min-width: 100upx;
							font-size: 25upx;
							color: #aeaeae;
							margin-right: 30upx;
							white-space: nowrap;
						}

						.bold_text {
							font-size: 25upx;
							color: #333333;
						}

						.beyond_text {
							line-height: 55upx;
						}
					}

					.protocol {
						justify-content: space-between;
					}
				}
			}

			.Trading_Rules_box {
				margin-top: 35rpx;

				.pay_rules {
					border-radius: 20rpx;
					background-color: white;
					box-sizing: border-box;
					padding-left: 20rpx;
					padding-right: 20rpx;
					font-size: 0rpx;
					padding-bottom: 30rpx;
					margin-bottom: 40rpx;

					.title {
						height: 80rpx;
						line-height: 80rpx;
						font-size: 28rpx;
						color: #999999;
					}

					.dian_5 {
						width: 650rpx;
						height: 20rpx;
						margin-bottom: 20rpx;
					}

					.rules_text {
						display: flex;
						justify-content: space-between;

						.rules_model {
							display: flex;
							flex-direction: column;
							font-size: 24rpx;
							align-items: center;
							height: 40rpx;
							justify-content: space-between;

							.hong {
								color: #f96b6b;
								margin-bottom: 5upx;
							}

						}
					}

					.desc_text {
						margin-top: 50rpx;
						margin-bottom: 40rpx;
						font-size: 26rpx;
						color: #999999;
					}
					
					.service_charge{
						font-size: 28upx;
						color: #999999;
						border-top: 2upx solid #fbfbfb;
						padding-top: 20upx;
						display: flex;
						justify-content: space-between;
						
						.service_money{
							display: flex;
							align-items: center;
							color: #333333;
							view{
								margin-left: 10upx;
							}
						}
					}
					
					.explain{
						font-size: 25upx;
						color: #999999;
						border-top: 2upx solid #fbfbfb;
						padding-top: 20upx;
						view{
							line-height: 43upx;
						}
					}

				}
			}

			.common_problem_box {
				background-color: white;
				border-radius: 20upx;
				margin-top: 35upx;
				box-sizing: border-box;
				padding: 0 25upx 25upx;

				.btn_box {
					height: 150upx;
					display: flex;
					justify-content: flex-end;
					align-items: center;

					.btn {
						padding: 0 20upx 0;
						background-color: $uni-global-color-theme;
						color: white;
						font-size: 28upx;
						line-height: 85upx;
						text-align: center;
						border-radius: 15upx;
					}
				}

				.text {
					box-sizing: border-box;
					padding: 30upx;
					border-radius: 20upx;
					font-size: 28upx;
					border: 1upx solid #f5f5f5;
					color: #999999;
					line-height: 50upx;
				}
			}

			.detail_footer_text {
				margin-top: 35rpx;
				font-size: 22rpx;
				color: #848484;
				padding-bottom: 40rpx;

				.txt {
					line-height: 35rpx;
				}
			}

			.detail_footer_text {
				margin-top: 35upx;
				font-size: 20upx;
				color: #999999;
				padding-bottom: 40upx;
				line-height: 35upx;

				.first_txt {
					font-size: 22upx;
					color: #848484;
				}

			}

		}

		.detail_footer_box {
			position: fixed;
			bottom: 0upx;
			height: 100upx;
			width: 750upx;
			background-color: white;
			z-index: 3;
			display: flex;

			.go_pay_btn {
				flex-grow: 1;
				height: 100upx;
				line-height: 100upx;
				text-align: center;
				background-color: $uni-global-color-theme;
				color: white;
				font-size: 35upx;
			}
		}

	}
</style>
